<template>
    <div class="messageBoards">
        MessageBoards
        <div v-if="count != 0">{{ count > 99 ? 99 + '+' : count }}</div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useUserStores } from "@/stores/modules/user.js";
import { getMessageNewCount_API } from '@/axios/api/other.js'

const userStores = useUserStores();
const config = userStores.getConfigAction();

const count = ref(0);

onMounted(() => {

});

const getMessageNewCount = () => {
    getMessageNewCount_API({
        id: config.messageLookId
    }).then(res => {
        console.log(id)
    }).catch(res => {
        console.log(id)
    })
}

</script>

<style lang="scss" scoped>
.messageBoards {
    width: 100%;
    height: 100%;
    position: relative;

    >div {
        background: red;
        color: white;
        border-radius: 7px 7px 7px 20px;
        font-size: 10px;
        padding: 2px;
        position: absolute;
        top: 0px;
        right: 0px;
        height: 20px;
        padding: 0 5px 0 10px;
        line-height: 20px;
        text-align: center;
    }
}
</style>